import React from 'react'
import { Row , Col , Switch , Button , Icon} from 'antd';
import { Link } from 'react-router';
import SrvItemStore from 'pages/serviceitems/stores/serviceItemStore.js';
import _ from 'lodash';
import StateMixin from 'reflux-state-mixin'

export default React.createClass({
  mixins: [StateMixin.connect(SrvItemStore)],
  getInitialState() {
    return {
    }
  },
  handleDelete(id) {
    this.props.deleteItem(id);
  },
  changeStatus(id,checked) {
    this.props.changeStatus(id,checked);
  },
  render() {
    return (
      <div className="srvItem-card-warp">
        <Row>
        { _.map(this.state.items, (item, index) => {
          return (
              <Col xs={24} sm={12} md={8} lg={6} key={item + index}>
              <div className="config_srvItem">
                <div className="SrvItem_card" >
                    <Link to={'/service/serviceitems/' + item.id}><h3>{item.name}</h3></Link>
                    <h4>{item.description}</h4>
                    <div className="srvItemButton">
                      <Button className='danger_btn' type="primary" 
                      disabled={item.status === 1} onClick={this.handleDelete.bind(this,item.id)} 
                      size="small" icon='delete'>删除</Button>
                    </div>
                    <div className={item.isRecommend === 1 ? 'isRecommend' : 'none' }><Icon type='like'/></div>
                    <Switch checkedChildren="上线"
                            unCheckedChildren="下线" checked={item.status === 1} 
                            onChange={this.changeStatus.bind(this,item.id)} />
                </div>
              </div>
              </Col>
          )})
        }
        </Row>
      </div>
    )
  }
});
